import { Directive, ElementRef, HostBinding, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[myBottom]'
})
export class ShowBottom {
  private _defaultColor = 'red';
  private el: HTMLElement;

  constructor(el: ElementRef) { this.el = el.nativeElement; }

  // @Input() set defaultColor(colorName: string){
  //   this._defaultColor = colorName || this._defaultColor;
  // }

  // @Input('myHighlight') highlightColor: string;

  @HostBinding('class.footerAnimationTop') scrollingTop = false;
  @HostBinding('class.footerAnimationDown') scrollingBottom = false;


  //   @HostListener('mouseenter') onMouseEnter() {
  //     // this.highlight(this.highlightColor || this._defaultColor);
  //     this.hovering = true;
  //   }
  //   @HostListener('mouseleave') onMouseLeave() {
  //     //  this.highlight(null);
  //     this.hovering = false;
  //   }

  @HostListener('window:scroll', ['$event'])
  doSomething(event) {
    //  console.debug("Scroll Event", document.body.scrollTop);
    //  var scroll_top = $(window).scrollTop();
    if (document.body.scrollTop > 300) {
      this.scrollingBottom = false;
      this.scrollingTop = true;
    }


    if (document.body.scrollTop < 50) {
      this.scrollingBottom = true;
      this.scrollingTop = false;
    }
    // private highlight(color: string) {
    //   this.el.style.backgroundColor = color;
    // }

  }
}